<template>
<div class="content">
  <div class="admin">
    <div class="title">账号登录</div>
    <el-form ref="ruleFormRef"
             :model="form"
             :rules="rules"
             class="ruleForm"
             status-icon>
      <el-form-item class="formInput" label="账号：" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item class="formInput" label="密码：" prop="password">
        <el-input v-model="form.password" />
      </el-form-item>
      <el-button type="primary" @click="LogonIn(ruleFormRef)">登录</el-button>
    </el-form>
  </div>
</div>
</template>

<script setup>
import{ reactive, ref } from "vue";
import { useRouter }  from  'vue-router'
import api from '../../src/api/index'
// import { FormInstance } from 'element-plus'
const router = useRouter()
const ruleFormRef = ref()
const form = reactive({
  name: '',
  password: ''
})

const rules = reactive({
  name: [
    { required: true, message: '请填写账号', trigger: 'blur' },
    // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请填写密码', trigger: 'blur' },
  ]
})

const LogonIn = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
      api.getUserInfo({
        phone: form.name,
        password: form.password
      }).then(res => {
        localStorage.removeItem('userInfo')
        localStorage.setItem('token',res.data.data.token)
        console.log(res.data.data, 'res')
        router.push({path: '/home'})
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}


</script>

<style scoped lang="scss">
.content{
  position: relative;
  width: 100vm;
  height: 100vh;
  background-image: linear-gradient( to bottom left, rgba(4,246,223, 0.6), rgba(206,249,81,0.6));
}
.admin{
  position: absolute;
  top: 20vh;
  right: 300px;
  display: flex;
  align-items: center;
  flex-direction: column;
  /*width: 400px;*/
  /*height: 200px;*/
  padding: 40px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px #eee;
  .title{
    padding-bottom: 20px;
  }
  .ruleForm{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .formInput{
    width: 300px;
  }
}
</style>